import React, { Component } from "react";
import { nanoid } from "nanoid";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import "./App.css";

export default class App extends Component {
  state = {
    todos: [
      {  id: "001", name: "吃饭", done: true },
      {  id: "002", name: "学习", done: true },
      { id: "003", name: "react", done: false },
    ],
  };

  //添加
  addTodo = (name) => {
    const { todos } = this.state;
    let row = { id: nanoid(), name, done: false };
    const newTodos = [row, ...todos];
    this.setState({ todos: newTodos });
  };

  //勾选单个任务
  changeTodo = (index, checked) => {
    let { todos } = this.state;
    todos[index].done = checked;
    let checkedLen = todos.filter((item) => item.done).length;
    this.setState({ todos, checkedLen });
  };

  //删除单个任务
  delTodo = (id) => {
    if (!id) return;
    if(window.confirm("是否要删除该任务")) {
      let { todos } = this.state;
      let newTodos = todos.filter((item) => item.id !== id);
      let checkedLen = newTodos.filter((item) => item.done).length;
      this.setState({ todos: newTodos, checkedLen });
    }
  };

  //是否全选
  changeTodosAll = (checked) => {
    let { todos } = this.state;
    let newTodos = todos.map((item) => {
      item.done = checked;
      return item;
    });
    this.setState({ todos: newTodos });
  };

  render() {
    const { todos } = this.state;
    return (
      <div className="todo-list-box">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List
            todos={todos}
            changeTodo={this.changeTodo}
            delTodo={this.delTodo}
          />
          <Footer
            todos={todos}
            changeTodosAll={this.changeTodosAll}
            clearTodosAll={this.changeTodosAll}
          />
        </div>
      </div>
    );
  }
}
